<template>
	<el-main>
		<div class="tips-box">
			<div class="tips-title">
				什么是XSS攻击：
			</div>
			<div>
				XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。
			</div>
		</div>
		<el-row style="margin-top: 24px;" :gutter="20">
			<el-col :md="12">
				<el-tag type="warning">此处尚未经过处理</el-tag>
				<div style="margin-top: 10px;" v-html="content"></div>
			</el-col>
			<el-col :md="12">
				<el-tag type="success">此处已经过Vue-Xss处理</el-tag>
				<div style="margin-top: 10px;" v-html="$xss(content)"></div>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	export default {
		name: 'Xss',
		data () {
			return{
				content: `<button onclick='alert("xss攻击")'>请点击这里</button>`
			}
		},
		mounted() {
			console.log(this.$xss(this.content));
		}
	}
</script>

<style scoped>
	.tips-box {
		background-color: #fef0f0;
		border-color: #fde2e2;
		color: #f56c6c;
		padding: 8px 16px;
		border-radius: 4px;
		font-size: 13px;
	}
	.tips-title {
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 5px;
	}
	@media only screen and (max-width: 1199px) {
		.el-col-24 {
			width: 50%;
		}
	}
</style>
